var user = [
    {id: 1,TitleInfo:"垃圾分类，从我做起", LeiInfo:"居家生活",JinJi:"日常",NeiRong:"图文",YueDu:120},
    {id: 2,TitleInfo:"禁止电动车进楼充电", LeiInfo:"消防安全",JinJi:"紧急",NeiRong:"文字",YueDu:244},
    {id: 3,TitleInfo:"万众一心，做好疫情防控工作", LeiInfo:"安全防范",JinJi:"紧急",NeiRong:"图文",YueDu:212},
    {id: 4,TitleInfo:"地下车库维修通知", LeiInfo:"特别提醒",JinJi:"紧急",NeiRong:"文字",YueDu:88},
    {id: 5,TitleInfo:"停水通知", LeiInfo:"特别提醒",JinJi:"紧急",NeiRong:"图文",YueDu:300},
    {id: 6,TitleInfo:"开集通知", LeiInfo:"居家生活",JinJi:"紧急",NeiRong:"图文",YueDu:150},
    {id: 7,TitleInfo:"端午节快乐", LeiInfo:"特别提醒",JinJi:"日常",NeiRong:"图文",YueDu:320},
    {id: 8,TitleInfo:"物业费社区电影公映活动", LeiInfo:"居家生活",JinJi:"日常",NeiRong:"短视频",YueDu:115},
    {id: 9,TitleInfo:"明天有暴雨，请做好防范", LeiInfo:"特别提醒",JinJi:"日常",NeiRong:"短视频",YueDu:54},
    {id: 10,TitleInfo:"失物招领通知", LeiInfo:"特别提醒",JinJi:"日常",NeiRong:"文字",YueDu:99},
    {id: 11,TitleInfo:"免费领取洗衣液", LeiInfo:"特别提醒",JinJi:"日常",NeiRong:"文字",YueDu:450}
]

var operid = -1;
var perSize = 10;
var currentPage = 1; 
var totalPage = -1; 
var totalTiao = 11;
var perSizeArr = [10,5,15];

// window.onload=function(){
    displayUserTable();
    pageClick();
    pagebar();
    add();
    del();
    find();
    select();
    edit();
    currentDisplay();
// }

function displayUserTable(){
    $("#userTable").html("");
    var start = (currentPage -1 )*perSize;
    var end = start + perSize;
    var outHtml = "";
    for(var i=start;i<end&&i<user.length;i++){
        outHtml+="<tr>"+
        "<td>"+user[i].id+"</td>"+
        "<td>"+user[i].TitleInfo+"</td>"+
        "<td>"+user[i].LeiInfo+"</td>"+
        "<td>"+user[i].JinJi+"</td>"+
        "<td>"+user[i].NeiRong+"</td>"+
        "<td>"+user[i].YueDu+"</td>"+
        "<td><button class=\"btn btn-default del\" data-index='"+i+"'>删除</button><button class=\"btn btn-default edit\"  data-index='"+i+"'>编辑</button></td>"+
        "</tr>";
    }
    $("#userTable").html(outHtml);
    pageClick();
    pagebar();
}


function add(){
    
    $("#btnAddForm").click(function(){
        operid= -1;
        $("#addUser").modal('show');
    })
    $("#btnAdd").click(function(){
        var id = $("#txtId").val();
        var TitleInfo = $("#txtTitleInfo").val();
        var LeiInfo = $("#txtLeiInfo").val();
        var JinJi = $("#txtJinJi").val();
        var NeiRong = $("#txtNeiRong").val();
        var YueDu = $("#txtYueDu").val();
         
        var obj = {"id":id,"TitleInfo":TitleInfo,"LeiInfo":LeiInfo,"JinJi":JinJi,"NeiRong":NeiRong,"YueDu":YueDu};

        if(operid==-1){
            user.push(obj);
        }else{
            user.splice(operid,1,obj);
        }
        id = $("#txtId").val("");
        TitleInfo = $("#txtTitleInfo").val("");
        LeiInfo = $("#txtLeiInfo").val("");
        JinJi = $("#txtJinJi").val("");
        NeiRong = $("#txtNeiRong").val("");
        YueDu = $("#txtYueDu").val("");
        displayUserTable();
        $("#addUser").modal('hide');
        currentDisplay();
        $("#moren").prop({"selected":"selected"});
        
    })
    $("#btnCancel").click(function(){
        $("#addUser").modal('hide');
    })
}

function edit(){
    $("#userTable").on('click','.edit',function(){
        var index = $(this).attr('data-index');
        operid = index;
        $("#addUser").modal('show');
        $("#txtId").val(user[index].id);
        $("#txtTitleInfo").val(user[index].TitleInfo);
        $("#txtLeiInfo").val(user[index].LeiInfo);
        $("#txtJinJi").val(user[index].JinJi);
        $("#txtNeiRong").val(user[index].NeiRong);
        $("#txtYueDu").val(user[index].YueDu);
    })
}

function del(){
    $("#userTable").on('click','.del',function(){
        var index = $(this).attr('data-index');
        user.splice(index,1);
        displayUserTable();
        currentDisplay();
        $("#moren").prop({"selected":"selected"});
    })
}

function find(){
    $("#exampleInputName2").on("keyup",function(){
        var j = 0;
        var shuru = $(this).val();
        var result = new RegExp(shuru);
        var outHtml = "";
        if(shuru!=""){
            for(var i=0;i<user.length;i++){
                var match = user[i].TitleInfo;
                if(result.test(match)){
                    outHtml+="<tr>"+
                    "<td>"+user[i].id+"</td>"+
                    "<td>"+user[i].TitleInfo+"</td>"+
                    "<td>"+user[i].LeiInfo+"</td>"+
                    "<td>"+user[i].JinJi+"</td>"+
                    "<td>"+user[i].NeiRong+"</td>"+
                    "<td>"+user[i].YueDu+"</td>"+
                    "<td><button class=\"btn btn-default del\" data-index='"+i+"'>删除</button><button class=\"btn btn-default edit\"  data-index='"+i+"'>编辑</button></td>"+
                    "</tr>"
                    j++;
                }
                $("#userTable").html(outHtml);

                // 当前显示的条数
                var myperSize = document.getElementById("perSize");
                // 总条数
                var mytotalTiao = document.getElementById("totalTiao");
                // 当前页面
                var mycurrentPage = document.getElementById("currentPage");
                // 总页面
                var mytotalPage = document.getElementById("totalPage");

                if(j<=perSizeArr[0]){
                    myperSize.innerText = j;
                    mytotalTiao.innerText = j;
                    mycurrentPage.innerText = 1;
                    mytotalPage.innerText = 1;

                }else{
                    myperSize.innerText =10;
                    mytotalTiao.innerText = j;
                    mycurrentPage.innerText = 1
                    mytotalPage.innerText = Math.ceil(j / perSizeArr[0]);
                }
                totalPage = Math.ceil(j / perSize);
                var str = "";
                for(var k = 0;k<totalPage;k++){
                    if(currentPage==(k+1)){
                        str+="<button class=\"btn btn-primary page\">"+(k+1)+"</button>";
                    }else{
                        str+="<button class=\"btn btn-default page\">"+(k+1)+"</button>";
                    }
                }
                $("#divPage").html(str);
            }
        }else{
            displayUserTable();
            currentDisplay();
        }
    })
}

function select(){
    $("#selectOption").change(function(e){
        var j = 0;
        var xuanXiang = $(this).val();
        var outHtml = "";
        var result = new RegExp(xuanXiang);
        for(var i=0;i<user.length;i++){
            var match = user[i].LeiInfo;
            if(result.test(match)){
                outHtml+="<tr>"+
                "<td>"+user[i].id+"</td>"+
                "<td>"+user[i].TitleInfo+"</td>"+
                "<td>"+user[i].LeiInfo+"</td>"+
                "<td>"+user[i].JinJi+"</td>"+
                "<td>"+user[i].NeiRong+"</td>"+
                "<td>"+user[i].YueDu+"</td>"+
                "<td><button class=\"btn btn-default del\" data-index='"+i+"'>删除</button><button class=\"btn btn-default edit\"  data-index='"+i+"'>编辑</button></td>"+
                "</tr>"
                $("#userTable").html(outHtml);
                pageClick();
                pagebar();
                j++;
                // 当前显示的条数
                var myperSize = document.getElementById("perSize");
                // 总条数
                var mytotalTiao = document.getElementById("totalTiao");
                // 当前页面
                var mycurrentPage = document.getElementById("currentPage");
                // 总页面
                var mytotalPage = document.getElementById("totalPage");

                if(j<=perSizeArr[0]){
                    myperSize.innerText = j;
                    mytotalTiao.innerText = j;
                    mycurrentPage.innerText = 1;
                    mytotalPage.innerText = 1;
                }else{
                    myperSize.innerText =10;
                    mytotalTiao.innerText = j;
                    mycurrentPage.innerText = 1
                    mytotalPage.innerText = Math.ceil(j / perSizeArr[0]);
                }

                totalPage = Math.ceil(j / perSize);
                if(currentPage>totalPage){
                    currentPage = totalPage;
                }
                var str = "";
                for(var k = 0;k<totalPage;k++){
                    if(currentPage==(k+1)){
                        str+="<button class=\"btn btn-primary page\">"+(k+1)+"</button>";
                    }else{
                        str+="<button class=\"btn btn-default page\">"+(k+1)+"</button>";
                    }
                }
                $("#divPage").html(str);

            }else if(xuanXiang  == "全部"){
                displayUserTable();
                currentDisplay();
            }
        }
    })
}



// 当页面只显示10条内容时
function currentDisplay(){
    // 当前显示的条数
    var myperSize = document.getElementById("perSize");
    // 总条数
    var mytotalTiao = document.getElementById("totalTiao");
    // 当前页面
    var mycurrentPage = document.getElementById("currentPage");
    // 总页面
    var mytotalPage = document.getElementById("totalPage");

    if(user.length<=perSizeArr[0]){
        myperSize.innerText = user.length;
        mytotalTiao.innerText = user.length;
        mycurrentPage.innerText = 1;
        mytotalPage.innerText = 1;
   
    }else{
        myperSize.innerText =10;
        mytotalTiao.innerText = user.length;
        mycurrentPage.innerText = 1;
        mytotalPage.innerText = Math.ceil(user.length / perSizeArr[0]);
    }
}


function pagebar(){
    totalPage = Math.ceil(user.length / perSize);
    if(currentPage>totalPage){
        currentPage = totalPage;
    }
    $("#divPage").html("");
    var str = "";
    for(var i = 0;i<totalPage;i++){
        if(currentPage==(i+1)){
            str+="<button class=\"btn btn-primary page\">"+(i+1)+"</button>";
        }else{
            str+="<button class=\"btn btn-default page\">"+(i+1)+"</button>";
        }
    }
    $("#divPage").html(str);
}


function pageClick(){
    $("#divPage").on("click",".page",function(){
        $(".page").each(function(index,item){
            $(this).removeClass('btn-primary');
        });
        $(this).addClass('btn-primary');
        currentPage = Number(this.innerText);
        var mycurrentPage = document.getElementById("currentPage");
        var myperSize = document.getElementById("perSize");
        mycurrentPage.innerText = currentPage;
        myperSize.innerText = user.length - 10;
        displayUserTable();
    });

}

